<template>
  <div>
    <div
      v-if="!!queryWorkItemId"
      ref="cDetailsOfInspection"
      class="content-box"
    >
      <div class="flex-layout" style="margin-bottom: 14px">
        <div class="color-red" :style="{color:showInfo?'red':'transparent'}">{{ info }}</div>
        <div v-if="!!query.subType">
          <!-- add 为新增，deal 为冲销 -->
          <el-button
            class="pms-button-primary mr-5"
            @click="handleClick(1)"
          >新增验工计价</el-button>
          <el-button
            class="pms-button-primary mr-5"
            @click="handleClick(2)"
          >冲销验工计价</el-button>
        </div>
      </div>
      <wz-table
        :columns="columns"
        :use-index="true"
        :table-data="tableData"
        :getListMethod="getListMethod"
      >
        <template #accContent="{ row }">
          <div class="click-row" @click="handleClick(3, row)">
            {{ row.accContent || "验工计价查看" }}
          </div>
        </template>
        <template #orderState="{ row }">
          <div>
            {{ orderStateDictionaries(row) }}
          </div>
        </template>
        <template #isPush="{ row }">
          <div>
            {{ isPushDictionaries(row) || row.isPush }}
          </div>
        </template>
        <template #payType="{ row }">
          <div>
            {{ payTypeDictionaries(row) }}
          </div>
        </template>
        <template #dealPerson="{ row }">
          <div v-if="row.dealPerson">
            {{ `${row.dealPerson}(${row.dealPersonID})` }}
          </div>
          <div v-else>
            -
          </div>
        </template>
        <template #createTime="{ row }">
          <div>
            {{ row.createTime }}
          </div>
        </template>
      </wz-table>
    </div>
    <div v-else ref="cDetailsOfInspection" class="content-box">
      <div class="flex-layout" style="margin-bottom: 14px">
        <div class="color-red" :style="{color:showInfo?'red':'transparent'}">{{ info }}</div>
        <div v-if="!!query.subType">
          <!-- add 为新增，deal 为冲销 -->
          <el-button
            class="pms-button-primary mr-5"
            @click="handleClick(1)"
          >新增验工计价</el-button>
          <el-button
            class="pms-button-primary mr-5"
            @click="handleClick(2)"
          >冲销验工计价</el-button>
        </div>
      </div>
      <wz-table
        ref="info"
        :columns="columns"
        :use-index="true"
        :table-data="tableData"
        :getListMethod="getListMethod"
      >
        <template #accContent="{ row }">
          <div :class="{'click-row':query.workItemId}" @click="handleClick(3, row)">
            {{ row.accContent || "验工计价查看" }}
          </div>
        </template>
        <template #orderState="{ row }">
          <div>
            {{ orderStateDictionaries(row) }}
          </div>
        </template>
        <template #isPush="{ row }">
          <div>
            {{ isPushDictionaries(row) || row.isPush }}
          </div>
        </template>
        <template #payType="{ row }">
          <div>
            {{ payTypeDictionaries(row) }}
          </div>
        </template>
        <template #dealPerson="{ row }">
          <div v-if="row.dealPerson">
            {{ `${row.dealPerson}(${row.dealPersonID})` }}
          </div>
          <div v-else>
            -
          </div>
        </template>
        <template #createTime="{ row }">
          <div>
            {{ row.createTime }}
          </div>
        </template>
      </wz-table>
    </div>
  </div>
</template>

<script>
// function sendIframeHeight(params) {
//   console.log(this)
//   return
//   window.parent.postMessage(params, this.$fixIframeArr())
// }
import wzTable from '@/components/basic/cTable.vue'
import { DETAILS_OF_INSPECTION_COLUMN } from '../enum/textEnum'
import { getItAccInfo, ifHaveInsVal,getPrjDetail } from '@/api/checkoutValuation/index'
import { disableScroll } from '@/utils'
import checkOutEnum from '@/mixins/checkOutEnum'
export default {
    name: 'CDetailsOfInspection',
    components: { wzTable },
    mixins: [checkOutEnum],
    data() {
        return {
            title: '验工计价信息',
            info: '同一个月份最多可允许发起三次验工计价',
            columns: [],
            tableData: [],
            activeName: 'cDetailsOfInspection',
            showInfo:true
        }
    },
    computed: {
        query() {
            return this.$route.query
        },
        queryWorkItemId() {
            return this.$route.query.workItemId
        }
    },
    async mounted() {
       this.init()
       window.addEventListener('storage', (e) => {
         const base_url = ''
         if (e.origin === base_url) {
           return
         }
        console.log(localStorage.getItem('pmsZrCheckoutValuation'), +localStorage.getItem('pmsZrCheckoutValuation') === 0)
        if (+localStorage.getItem('pmsZrCheckoutValuation') === 0) {
            this.init()
        }
       })
      //  获取项目信息
       this.getInitPriDetail()
    },
    methods: {
       async getInitPriDetail() {
            const {data} = await getPrjDetail({prjId:this.query.prjId})
            this.showInfo = !(data.isNewbusiness==='1'&&['25','29'].includes(data.buildModes))
        },
      getListMethod(){
        console.log(11);
      },
      sendIframeHeight(params) {
          window.parent.postMessage(params, this.$fixIframeArr())
      },
       async init() {
        this.columns = DETAILS_OF_INSPECTION_COLUMN
        const params = { height: '', type: 'detailsOfInspection' }
        // params.height = this.$refs['cDetailsOfInspection'].clientHeight
        // window.parent.postMessage(params, '*')
        const res = await getItAccInfo({ prjId: this.query.prjId })
        if (+res.code === 200) {
            this.tableData = res.data
        }
        this.$nextTick(async() => {
            if (this.tableData.length) {
                params.height = this.$refs['cDetailsOfInspection'].clientHeight
            } else {
                params.height = 132
            }
            console.log("params",params);
            this.sendIframeHeight(params)
        })
        },
        // 2024-10-09 阻断问题if过多解决方案
         optimizeNewOne(row, type) {
          window.open(
                      this.$router.resolve({
                          name: 'InspectionValuationDetailsView',
                          query: {
                              prjId: this.query.prjId,
                              queryType: type,
                              type: 1,
                              month: row ? row.accTime : '',
                              createTime: row ? row.createTime : '',
                              accContent: row ? row.accContent : '',
                              workItemId: this.query.workItemId,
                              nodeNameWord: this.query.nodeNameWord,
                              subType: 0
                          }
                      }).href,
                      '_blank'
                  )
         },
        // 2024-10-09 阻断问题if过多解决方案
         optimizeNewTwo(code, result, data) {
          if (+code === 200 && result[data]) {
                this.$confirm(result[data], '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    customClass: 'pms-confirm',
                    cancelButtonClass: 'pms-zr-button',
                    confirmButtonClass: 'pms-zr-button-primary',
                    type: 'warning'
                })
                this.dialogEl()
                return true
            }
          if (+code === 200 && !result[data]) {
              return false
            }
            return false
         },
          // 2024-10-09 阻断问题if过多解决方案
          optimizeNewThree(row, type, itAccId) {
            window.open(
                    this.$router.resolve({
                        name: 'InspectionValuationDetailsView',
                        query: {
                            prjId: this.query.prjId,
                            queryType: type,
                            month: row ? row.accTime : '',
                            createTime: row ? row.createTime : '',
                            accContent: row ? row.accContent : '',
                            workItemId: this.query.workItemId,
                            nodeNameWord: this.query.nodeNameWord,
                            itAccId: itAccId,
                            subType: 1
                        }
                    }).href,
                    '_blank'
                )
          },
        async handleClick(type, row) {
            let itAccId = ''
            if (+type === 3) {
              if (this.query.workItemId) {
                this.optimizeNewOne(row, type)
              }
              return
            }
            localStorage.setItem('pmsZrCheckoutValuation', 1)
            const result = {
                2: '当前有未发起或未完成的验工计价流程,请完成验工计价流程后再进行操作!',
                3: '同一个月份最多可允许发起三次验工计价'
            }
            const { code, data } = await ifHaveInsVal({
                prjId: this.query.prjId
            })
            if (this.optimizeNewTwo(code, result, data)) {
              return
            }
            itAccId = data
            if (this.queryWorkItemId) {
               this.optimizeNewThree(row, type, itAccId)
            }
        },
        dialogEl() {
            // 将弹框挂载在最外层
            const contentBody = window.top.document.body
            this.$nextTick(() => {
                const dialogModal = document.querySelector('.v-modal')
                contentBody.appendChild(
                    document.querySelector('.el-message-box__wrapper')
                )
                contentBody.appendChild(dialogModal)
                disableScroll(contentBody)
            })
        }
    }
}
</script>
<style lang="scss">
.pms-confirm {
    .el-message-box__btns {
        text-align: center;
    }
    .el-button {
        height: 20px;
        min-width: 100px;
        color: #fff;
        background: #eb4b4b;
        border: none;
        border-radius: 3px;
        padding: 0 15px;
        background: #eb4b4b;
        border-radius: 3px;
        font-size: 12px;
        line-height: 20px;
        text-decoration: none;
        text-align: center;
        display: inline-block;
        zoom: 1;
        cursor: pointer;
        vertical-align: middle;
        outline: none;
        box-sizing: border-box;
        &:hover {
            background: #c53f3f;
            border: none;
            color: #fff;
        }
        &:active {
            background: #c53f3f;
            border: none;
            color: #fff;
        }
        &:focus {
            background: #c53f3f;
            border: none;
            color: #fff;
        }
    }
}
</style>
<style lang="scss" scoped>
.el-collapse {
    margin-bottom: 20px;
}
.el-collapse-item {
    box-shadow: 0px 0px 6px 0px rgba(191, 192, 192, 0.52);
    /* 调整各个item之间的距离为20px */
    /* border: 1px; */
}

.el-collapse-item__wrap {
    padding: 0 20px;
    /* 为el-collapse-item的内容添加20像素的padding */
}

.el-collapse-item__header {
    padding-left: 20px;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 600;
}

.item_icon {
    width: 6px;
    background: rgb(235, 75, 75);
    height: 15px;
    margin-right: 10px;
    border-radius: 10px;
}
.click-row {
    color: #53c7f8;
    cursor: pointer;
}
.flex-layout {
    display: flex;
    justify-content: space-between;
}
</style>
